<template>
	<section>
		<!--工具条:高级查询+新增-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" >
				<el-form-item>
					<el-input v-model="keyword" placeholder="请输入关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="keywordQuerry">关键字查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

    <!--
      :data="departments" - 列表数据
      highlight-current-row v-loading="listLoading" - 当前行高亮
      @selection-change="selsChange" - 选项改变就是触发
      v-loading="listLoading" - 记载框
      sortable  - 排序
    -->
		<!--列表-->
		<el-table :data="departments"
              highlight-current-row
              v-loading="listLoading"
              @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="sn" label="编号" width="120" sortable>
			</el-table-column>
			<el-table-column prop="name" label="名称" width="100"  sortable>
			</el-table-column>
			<el-table-column prop="dirPath" label="路径" width="100" sortable>
			</el-table-column>
			<el-table-column prop="state" label="状态" width="120" sortable>
        <template slot-scope="scope">
          <span style="color: green" v-if="scope.row.state==1">启用</span>
          <span style="color: red" v-else-if="scope.row.state==0">禁用</span>
          <span style="color: darkslategray" v-else>未知</span>
        </template>
			</el-table-column>
			<el-table-column prop="manager.username" label="经理" width="120" sortable>
			</el-table-column>
			<el-table-column prop="parent.name" label="上级部门" width="120" sortable>
			</el-table-column>
			<el-table-column label="操作" >
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条：批量删除 + 分页栏-->
		<el-col :span="24" class="toolbar">
      <!--
        :disabled="this.sels.length===0"
        当sels长度为0的时候，显示当前属性disabled - 禁用。如果不为0就不禁用
       -->
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                     :page-size="pageSize" :current-page="currentPage" :total="totals" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
    <!--
      title="添加或修改" - 标题
      :visible.sync="saveFormVisible" - 控制当前对话框是否显示 - 默认为false不显示
      :close-on-click-modal="false" - 点击对话框以外的区域不关闭
    -->

		<el-dialog :title="title" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <!--
        :model="saveForm"  - 表单绑定模型数据对象saveForm
        label-width="80px"  - 标签的宽度
        :rules="saveFormRules" - 验证规则 - 表单项校验
        ref="saveForm" - 为当前对话框取名saveForm - 做表单校验

        label="姓名" - 标签名字
        prop="name" - 要做校验的时候必须要，不做校验就没有必要
        v-model="saveForm.name" - 双向绑定
        auto-complete="off" - 自动完成 - 关闭
      -->
      <el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
        <el-form-item label="部门编号" prop="sn">
          <el-input v-model="saveForm.sn" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
					<el-input v-model="saveForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="saveForm.state">
						<el-radio class="radio" :label="1">启用</el-radio>
						<el-radio class="radio" :label="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>

          <!--
           select - 选择框
           v-model="saveForm.manager_id" - 双向绑定
           v-for="item in managers"   - item就是每一个经理对象 - employee对象

             :label="item.username" - 回显哪一个属性值【经理的名称】
              :value="item.id" - 传递哪个属性值【经理的id】
             回显机制：
               1.定位哪一个对象：v-model="saveForm.manager_id"  与 item中的id 【】
               2.显示哪一个属性：:label="item.username"靠这个属性
             添加和修改的时候传值机制：
               1.选中某一个经理的时候，将当前对象的id  【:value="item.id"】
               2.传递给v-model="saveForm.manager_id"
         -->
        <el-form-item label="部门经理" >
          <el-select v-model="saveForm.manager_id" placeholder="请选择">
            <el-option
                v-for="item in managers"
                :label="item.username"
                :value="item.id"
                :key="item">
              <!--下拉框显示的数据  经理名字，经理电话-->
              <span style="float: left">{{item.username}}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{item.phone}}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <!--
        <el-cascader ---级联框
        v-model="saveForm.parent_id" ---双向绑定-随着对话框中的parent_id的改变而改变
        :options="deptTree" ---查询的集合，也是前端显示的数据
        props---参数
          checkStrictly = true ---设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
          label:'name'---回显哪一个属性值：部门表的部门名称
          value:'id' ---传值哪一个属性值：部门的id
        -->
        <el-form-item label="上级部门" >
            <el-cascader v-model="saveForm.parent_id"
                :options="deptTree"
                :props="{
                  checkStrictly: true,
                  label:'name',
                  value:'id'
                }"
                clearable>
            </el-cascader>

        </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="saveFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="saveSubmit" :loading="saveLoading">提交</el-button>
			</div>
		</el-dialog>

	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getDepartmentListPage, removeDepartment, batchRemoveDepartment, editDepartment, addDepartment } from '../../api/api';

	export default {
		data() {
			return {
        //1.分页查询的相关参数
        departments: [],//列表数据
        currentPage:1,//当前页
        pageSize:5,//每页显示的条数
        totals: 0,//总数量
        listLoading: false,//加载框

        //2.高级查询相关参数
        keyword:'',

        //3.批量删除的相关参数
        sels: [],//列表选中列

        //4.添加或修改的相关数据
        title:'',
				saveFormVisible: false,//控制对话框是否显示 - 默认不显示
        saveLoading: false,//保存的加载框 - 默认不显示
        saveFormRules: {//表单项验证
					sn: [
						{ required: true, message: '请输入编号', trigger: 'blur' }
					],
					name: [
						{ required: true, message: '请输入名称', trigger: 'blur' }
					]
				},
        //添加和修改中对话框的数据
        saveForm: {
					id: null,
					sn: '',
					name: '',
					state: 1,
          manager_id: null,
          parent_id: null
				},
        //显示所有部门经理
        managers:[],
        //显示部门树
        deptTree:[]
			}
		},
		methods: {

      //1.获取部门列表-分页查询
      getDepartments() {
        let para = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          //高级查询关键字
          keyword:this.keyword
        };
        this.listLoading = true;//显示加载框
        this.$http.post("/department",para).then(res=>{
          this.departments=res.data.data;//给数组赋值，显示数据列表
          this.totals=res.data.totals;//给总数量赋值，计算分页栏
          this.listLoading=false;//关闭加载框
        }).catch(res=>{
          this.$message.error("系统繁忙，请稍后再试！");
        })

      },


		  //2.点击分页实现
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getDepartments();
      },

      //3.高级查询 = 关键字查询
      keywordQuerry(){
        //防止当前页不在第一页的时候 通过关键字查询出现 当前页没有数据的情况
        this.currentPage=1;
        this.getDepartments();
      },


      //4.删除功能逻辑
      handleDel: function (index, row) {
        //elementUi提供确认框 - 点确定之后执行then里面的代码，点击取消执行catch中的逻辑
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
          //点击确认走这里
        }).then(() => {
            //显示加载框
            this.listLoading = true;
            //发送删除请求
            this.$http.delete("/department/" + row.id).then(res => {
              //关闭加载框
              this.listLoading = false;
              //如果删除成功
              if (res.data.success) {
                //提示删除成功的信息
                this.$message.success("删除成功");

                //删除成功之后对当前页的处理【特殊情况：删除最后一页的最后一条数据】
                var totalPage = Math.ceil(this.totals/this.pageSize);//总页数=最后一页
                //如果当前页是最后一页                  并且是最后一条数据                  并且不是第一页
                if(this.currentPage==totalPage && (this.totals-1)%this.pageSize==0 && this.currentPage!=1){
                  this.currentPage--;
                }
                //展示数据列表
                this.getDepartments();
              } else {
                //提示删除失败的信息
                this.$message.error("系统繁忙，请稍后再试！【500】")//后端错误500走这里
              }
            }).catch(res => {
              this.$message.error("系统繁忙，请稍后再试！【400，404】");
            })
        }).catch(() => {
          //点击取消走这里
        })

      },

      //5.选项改变的时候触发的逻辑
      selsChange: function (sels) {
        //将选中的对象的数组  赋值给 模型数据sels
        this.sels = sels;
      },

      //6.批量删除逻辑
      batchRemove: function () {
        //获取数组中每一个对象的id 并形成新的数组
        var ids = this.sels.map(item => item.id);
        //点击确认走这里
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          //显示加载框
          this.listLoading = true;
          //发送批量删除请求
          this.$http.patch("/department", ids).then(res => {
            //隐藏加载框
            this.listLoading = false;
            //如果成功走这里
            if (res.data.success) {
              //将当前页设置为1
              this.currentPage = 1;
              //展示数据列表
              this.getDepartments();
            } else {//如果失败走这里
              this.$message.error("系统繁忙，请稍后再试！【500】")//后端错误500走这里
            }
          }).catch(res => {
            this.$message.error("系统繁忙，请稍后再试！【400，404】")
          })
        }).catch(()=>{
            //点击取消走这里
        })

      },

      //7.点击修改按钮弹出对话框
			handleEdit: function (index, row) {
        this.title="编辑";
        //弹出对话框
				this.saveFormVisible = true;
        //回显数据：创建一个新的空对象{}，然后将row中的数据拷贝一份给{}
				this.saveForm = Object.assign({}, row);
        //获取所有的类型
        this.getManagers();
        //获取部门树
        this.getDeptTree();
			},

      //8.点击新增按钮弹出对话框
			handleAdd: function () {
        this.title="新增";
				this.saveFormVisible = true;
				this.saveForm = {
				  id:null,
				  sn:'',
					name: '',
					state: 1,
          manager_id: null,
          parent_id: null
				};
				//获取所有的类型
				this.getManagers();
				//获取部门树
				 this.getDeptTree();
			},

			//9.点击保存提交数据到后端
			saveSubmit: function () {
        //表单验证：只要表单项中任何一个验证不通过，都不能点击提交
        //所有的ref中名称为saveForm的表单
				this.$refs.saveForm.validate((valid) => {
					if (valid) {//表单验证通过 => 每一个表单项都通过了
						//显示保存加载框
					  this.saveLoading=true;
					  //把对话框里的数据封装到para对象里
            let para = Object.assign({}, this.saveForm);
            //对无限级树 上级部门 的处理 - 没有无限级树不需要处理
            //1.不修改上级部门，没有点级联框：2
            //2.不修改上级部门，点了级联框选择过其他部门：[ 2 ]
            //3.去掉上级部门：[]
            //4. [ 3, 9, 12 ]
            //5. null
            var isArr = para.parent_id;
            if(Array.isArray(isArr)){
              if(isArr.length==0){//空数组
                para.parent_id = null;
              }else{
                para.parent_id = isArr[isArr.length - 1];
              }
            }
            //发送添加请求，传数据参数
            this.$http.put("/department",para).then(res=>{
              //关闭保存加载模态框
              this.saveLoading=false;
              //关闭对话框
              this.saveFormVisible = false;
              //如果成功走这里
              if (res.data.success){
                //提示成功信息
                this.$message.success("操作成功");
                //重新展示数据列表，不需要改当前页
                this.getDepartments();
              }else {
                //操作失败-后端代码错误，走这里
                this.$message.error("系统繁忙，请稍后再试！【500】");
              }
            }).catch(res=>{
              //操作失败
              this.saveLoading = false;  //关闭加载框
              this.saveFormVisible = false; //关闭对话框
              this.$message.error("系统繁忙，请稍后再试！【400，404】")
            })
					}
				});
			},

      //10.获取所有的类型
      getManagers(){
        //前端发送请求，查询所有类型
        this.$http.get("/employee").then(res=>{
          //结果赋值到managers数组里
          this.managers=res.data;
        })
      },

      //11.获取部门树
      getDeptTree(){
        //前端发送请求，查询部门树
        this.$http.get("/department/deptTree").then(res=>{
          //结果赋值到deptTree数组里
          this.deptTree=res.data;
        })
      }

		},
		mounted() {
			this.getDepartments();
		}
	}

</script>

<style scoped>

</style>